<template>
  <div class="component-advanced-page" :class="{ 'dark-mode': darkMode }">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">高级组件</h1>
          <p class="page-subtitle">展示复杂业务场景中的高级UI组件，包括数据可视化、文件处理、表单设计等</p>
        </div>
        <div class="header-right">
          <el-button-group>
            <el-button type="primary" @click="exportComponentDoc">
              <el-icon><Download /></el-icon>
              导出文档
            </el-button>
            <el-button @click="toggleDarkMode" :type="darkMode ? 'warning' : 'info'">
              <el-icon><component :is="darkMode ? 'Sunny' : 'Moon'" /></el-icon>
              {{ darkMode ? '日间' : '夜间' }}
            </el-button>
            <el-button @click="refreshComponents" type="success">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </el-button-group>
        </div>
      </div>
    </div>

    <!-- 组件导航 -->
    <div class="component-nav">
      <el-card class="nav-card">
        <el-scrollbar>
          <div class="nav-items">
            <div
              v-for="nav in componentNavs"
              :key="nav.id"
              :class="['nav-item', { active: activeNav === nav.id }]"
              @click="scrollToSection(nav.id)"
            >
              <el-icon><component :is="nav.icon" /></el-icon>
              <span>{{ nav.name }}</span>
            </div>
          </div>
        </el-scrollbar>
      </el-card>
    </div>

    <!-- 组件展示区域 -->
    <div class="components-section">
      <!-- 数据可视化组件 -->
      <div id="charts" class="component-section">
        <el-card class="section-card">
          <template #header>
            <div class="section-header">
              <h2 class="section-title">数据可视化</h2>
              <p class="section-desc">高级图表和数据展示组件</p>
            </div>
          </template>

          <div class="demo-block">
            <h3 class="demo-title">仪表盘组件</h3>
            <div class="demo-content">
              <el-row :gutter="24">
                <el-col :span="8">
                  <div class="dashboard-card">
                    <div class="card-header">
                      <h4>实时数据</h4>
                      <el-tag :type="realTimeData.status === 'online' ? 'success' : 'danger'">
                        {{ realTimeData.status === 'online' ? '在线' : '离线' }}
                      </el-tag>
                    </div>
                    <div class="card-content">
                      <div class="metric-item">
                        <span class="metric-label">用户数</span>
                        <span class="metric-value">{{ realTimeData.users }}</span>
                      </div>
                      <div class="metric-item">
                        <span class="metric-label">访问量</span>
                        <span class="metric-value">{{ realTimeData.visits }}</span>
                      </div>
                      <div class="metric-item">
                        <span class="metric-label">转化率</span>
                        <span class="metric-value">{{ realTimeData.conversion }}%</span>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="progress-card">
                    <h4>项目进度</h4>
                    <div class="progress-list">
                      <div v-for="project in projects" :key="project.id" class="progress-item">
                        <div class="progress-info">
                          <span class="progress-name">{{ project.name }}</span>
                          <span class="progress-percent">{{ project.progress }}%</span>
                        </div>
                        <el-progress 
                          :percentage="project.progress" 
                          :color="getProgressColor(project.progress)"
                          :stroke-width="8"
                        />
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="status-card">
                    <h4>系统状态</h4>
                    <div class="status-list">
                      <div v-for="status in systemStatus" :key="status.name" class="status-item">
                        <div class="status-icon">
                          <el-icon :color="status.color"><component :is="status.icon" /></el-icon>
                        </div>
                        <div class="status-info">
                          <div class="status-name">{{ status.name }}</div>
                          <div class="status-value">{{ status.value }}</div>
                        </div>
                        <div class="status-indicator">
                          <el-tag :type="status.type" size="small">{{ status.label }}</el-tag>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 文件上传组件 -->
      <div id="upload" class="component-section">
        <el-card class="section-card">
          <template #header>
            <div class="section-header">
              <h2 class="section-title">文件上传</h2>
              <p class="section-desc">多种文件上传方式和处理</p>
            </div>
          </template>

          <div class="demo-block">
            <h3 class="demo-title">拖拽上传</h3>
            <div class="demo-content">
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-upload
                    class="upload-demo"
                    drag
                    action="#"
                    multiple
                    :auto-upload="false"
                    :on-change="handleFileChange"
                  >
                    <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <template #tip>
                      <div class="el-upload__tip">
                        支持 jpg/png 文件，且不超过 10MB
                      </div>
                    </template>
                  </el-upload>
                </el-col>
                <el-col :span="12">
                  <div class="upload-list">
                    <h4>上传队列</h4>
                    <div v-if="uploadQueue.length === 0" class="empty-queue">
                      暂无上传文件
                    </div>
                    <div v-else class="queue-list">
                      <div v-for="file in uploadQueue" :key="file.id" class="queue-item">
                        <div class="file-info">
                          <el-icon><Document /></el-icon>
                          <span class="file-name">{{ file.name }}</span>
                        </div>
                        <div class="file-status">
                          <el-progress 
                            v-if="file.status === 'uploading'" 
                            :percentage="file.progress" 
                            :stroke-width="4"
                            :show-text="false"
                          />
                          <el-tag 
                            v-else 
                            :type="file.status === 'success' ? 'success' : 'danger'" 
                            size="small"
                          >
                            {{ file.status === 'success' ? '成功' : '失败' }}
                          </el-tag>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 高级表格 -->
      <div id="table-advanced" class="component-section">
        <el-card class="section-card">
          <template #header>
            <div class="section-header">
              <h2 class="section-title">高级表格</h2>
              <p class="section-desc">功能丰富的数据表格组件</p>
            </div>
          </template>

          <div class="demo-block">
            <div class="table-toolbar">
              <div class="toolbar-left">
                <el-button type="primary" @click="addTableData">
                  <el-icon><Plus /></el-icon>
                  新增
                </el-button>
                <el-button @click="exportTableData">
                  <el-icon><Download /></el-icon>
                  导出
                </el-button>
              </div>
              <div class="toolbar-right">
                <el-input
                  v-model="tableSearch"
                  placeholder="搜索..."
                  style="width: 200px; margin-right: 10px;"
                  :prefix-icon="Search"
                  clearable
                />
                <el-button @click="refreshTableData">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </div>
            </div>

            <el-table
              :data="filteredTableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              stripe
              border
            >
              <el-table-column type="selection" width="50" />
              <el-table-column prop="id" label="ID" width="80" sortable />
              <el-table-column prop="name" label="姓名" sortable>
                <template #default="{ row }">
                  <div class="user-cell">
                    <el-avatar :size="32" :src="row.avatar" />
                    <span style="margin-left: 10px;">{{ row.name }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="email" label="邮箱" sortable />
              <el-table-column prop="department" label="部门" sortable>
                <template #default="{ row }">
                  <el-tag>{{ row.department }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-switch 
                    v-model="row.status" 
                    @change="handleStatusChange(row)"
                    active-text="启用"
                    inactive-text="禁用"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" fixed="right">
                <template #default="{ row }">
                  <el-button @click="viewUser(row)" type="primary" size="small" text>
                    <el-icon><View /></el-icon>
                    查看
                  </el-button>
                  <el-button @click="editUser(row)" size="small" text>
                    <el-icon><Edit /></el-icon>
                    编辑
                  </el-button>
                  <el-button @click="deleteUser(row)" type="danger" size="small" text>
                    <el-icon><Delete /></el-icon>
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="table-footer">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="tableData.length"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Download, Sunny, Moon, Refresh, TrendCharts, UploadFilled, Document,
  Plus, Search, View, Edit, Delete
} from '@element-plus/icons-vue'

// 响应式数据
const darkMode = ref(false)
const activeNav = ref('charts')
const tableSearch = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

// 组件导航
const componentNavs = [
  { id: 'charts', name: '数据可视化', icon: 'TrendCharts' },
  { id: 'upload', name: '文件上传', icon: 'UploadFilled' },
  { id: 'table-advanced', name: '高级表格', icon: 'Grid' }
]

// 实时数据
const realTimeData = reactive({
  status: 'online',
  users: 1245,
  visits: 8960,
  conversion: 15.6
})

// 项目进度数据
const projects = ref([
  { id: 1, name: '前端项目', progress: 85 },
  { id: 2, name: '后端API', progress: 60 },
  { id: 3, name: '移动端', progress: 30 },
  { id: 4, name: '测试工作', progress: 95 }
])

// 系统状态数据
const systemStatus = ref([
  { name: 'CPU使用率', value: '65%', color: '#67C23A', type: 'success', label: '正常', icon: 'Cpu' },
  { name: '内存使用', value: '4.2GB', color: '#E6A23C', type: 'warning', label: '警告', icon: 'MemoryCard' },
  { name: '磁盘空间', value: '120GB', color: '#409EFF', type: 'info', label: '充足', icon: 'HardDrive' },
  { name: '网络状态', value: '正常', color: '#67C23A', type: 'success', label: '稳定', icon: 'Connection' }
])

// 上传队列
const uploadQueue = ref([])

// 表格数据
const tableData = ref([
  {
    id: 1,
    name: '张三',
    email: 'zhangsan@example.com',
    department: '技术部',
    status: true,
    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face'
  },
  {
    id: 2,
    name: '李四',
    email: 'lisi@example.com',
    department: '产品部',
    status: false,
    avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b601?w=100&h=100&fit=crop&crop=face'
  },
  {
    id: 3,
    name: '王五',
    email: 'wangwu@example.com',
    department: '运营部',
    status: true,
    avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face'
  }
])

// 计算属性
const filteredTableData = computed(() => {
  if (!tableSearch.value) {
    return tableData.value
  }
  return tableData.value.filter(item => 
    item.name.includes(tableSearch.value) || 
    item.email.includes(tableSearch.value) ||
    item.department.includes(tableSearch.value)
  )
})

// 方法
const toggleDarkMode = () => {
  darkMode.value = !darkMode.value
  ElMessage.info(`已切换到${darkMode.value ? '夜间' : '日间'}模式`)
}

const refreshComponents = () => {
  ElMessage.success('组件已刷新')
  // 刷新实时数据
  realTimeData.users += Math.floor(Math.random() * 10)
  realTimeData.visits += Math.floor(Math.random() * 50)
  realTimeData.conversion = (Math.random() * 20).toFixed(1)
}

const exportComponentDoc = () => {
  ElMessage.success('组件文档导出成功')
}

const scrollToSection = (sectionId) => {
  activeNav.value = sectionId
  const element = document.getElementById(sectionId)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

const getProgressColor = (progress) => {
  if (progress >= 80) return '#67C23A'
  if (progress >= 60) return '#E6A23C'
  if (progress >= 30) return '#409EFF'
  return '#F56C6C'
}

const handleFileChange = (file) => {
  const newFile = {
    id: Date.now(),
    name: file.name,
    status: 'uploading',
    progress: 0
  }
  uploadQueue.value.push(newFile)
  
  // 模拟上传进度
  const interval = setInterval(() => {
    newFile.progress += 10
    if (newFile.progress >= 100) {
      newFile.status = Math.random() > 0.2 ? 'success' : 'error'
      clearInterval(interval)
    }
  }, 200)
}

const addTableData = () => {
  const newUser = {
    id: tableData.value.length + 1,
    name: `用户${tableData.value.length + 1}`,
    email: `user${tableData.value.length + 1}@example.com`,
    department: '新部门',
    status: true,
    avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face'
  }
  tableData.value.push(newUser)
  ElMessage.success('新增用户成功')
}

const exportTableData = () => {
  ElMessage.success('表格数据导出成功')
}

const refreshTableData = () => {
  ElMessage.success('表格数据已刷新')
}

const handleSelectionChange = (selection) => {
  console.log('Selected:', selection)
}

const handleStatusChange = (row) => {
  ElMessage.info(`用户${row.name}状态已${row.status ? '启用' : '禁用'}`)
}

const viewUser = (row) => {
  ElMessage.info(`查看用户: ${row.name}`)
}

const editUser = (row) => {
  ElMessage.info(`编辑用户: ${row.name}`)
}

const deleteUser = (row) => {
  const index = tableData.value.findIndex(item => item.id === row.id)
  if (index > -1) {
    tableData.value.splice(index, 1)
    ElMessage.success(`删除用户 ${row.name} 成功`)
  }
}

const handleSizeChange = (size) => {
  pageSize.value = size
}

const handleCurrentChange = (page) => {
  currentPage.value = page
}

// 生命周期
onMounted(() => {
  // 初始化组件
})
</script>

<style scoped>
.component-advanced-page {
  padding: 20px;
  min-height: 100vh;
  transition: all 0.3s ease;
}

.dark-mode {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

.page-header {
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.component-nav {
  margin-bottom: 24px;
}

.nav-card {
  border-radius: 12px;
}

.nav-items {
  display: flex;
  gap: 8px;
  padding: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
}

.nav-item:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

.nav-item.active {
  background-color: #409eff;
  color: white;
}

.component-section {
  margin-bottom: 32px;
}

.section-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #333;
}

.section-desc {
  font-size: 14px;
  color: #666;
  margin: 4px 0 0 0;
}

.demo-block {
  margin-bottom: 32px;
}

.demo-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 16px 0;
  color: #333;
}

/* 仪表盘卡片样式 */
.dashboard-card, .progress-card, .status-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 300px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.metric-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.metric-label {
  color: #666;
  font-size: 14px;
}

.metric-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.progress-item {
  margin-bottom: 16px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progress-name {
  font-size: 14px;
  color: #333;
}

.progress-percent {
  font-size: 12px;
  color: #666;
}

.status-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.status-icon {
  margin-right: 12px;
}

.status-info {
  flex: 1;
}

.status-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.status-value {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

/* 上传组件样式 */
.upload-demo {
  margin-bottom: 20px;
}

.upload-list {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  height: 300px;
}

.upload-list h4 {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #333;
}

.empty-queue {
  text-align: center;
  color: #999;
  padding: 40px 0;
}

.queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-name {
  font-size: 12px;
  color: #666;
}

/* 表格样式 */
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-cell {
  display: flex;
  align-items: center;
}

.table-footer {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

/* 暗色主题适配 */
.dark-mode .dashboard-card,
.dark-mode .progress-card,
.dark-mode .status-card {
  background-color: #2c2c2c;
  color: #e0e0e0;
}

.dark-mode .section-title {
  color: #e0e0e0;
}

.dark-mode .metric-value,
.dark-mode .status-name {
  color: #e0e0e0;
}

.dark-mode .nav-item:hover {
  background-color: #404040;
}

.dark-mode .upload-list {
  background-color: #2c2c2c;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .nav-items {
    flex-direction: column;
  }
  
  .toolbar-left,
  .toolbar-right {
    flex-direction: column;
    gap: 8px;
  }
  
  .dashboard-card,
  .progress-card,
  .status-card {
    height: auto;
    margin-bottom: 16px;
  }
}
</style>
